<template>
    <el-menu router :default-active="$route.path" background-color="#2A3F54" text-color="#fff">
        <h1 class="aside-title">科泰购管理系统</h1>
        <el-row class="aside-user">
            <el-col :span="10" :offset="2">
                <el-avatar :size="60" :src="userStore.userInfo.avatar || '默认头像路径'"></el-avatar>
            </el-col>
            <el-col :span="12">
                <h3>{{ userStore.userInfo.nickname || '未登录' }}</h3>
            </el-col>
        </el-row>

        <!-- 新闻分类管理子菜单 -->
        <el-submenu index="news" :router="true">
            <template #title>
                <el-icon>
                    <Management />
                </el-icon>
                <span>新闻分类管理</span>
            </template>
            <el-menu-item index="/main/news-type">
                <el-icon>
                    <Menu />
                </el-icon>
                分类列表
            </el-menu-item>
        </el-submenu>

        <!-- 商品管理子菜单 -->
        <el-submenu index="product" :router="true">
            <template #title>
                <el-icon>
                    <ShoppingCart />
                </el-icon>
                <span>商品管理</span>
            </template>
            <el-menu-item index="/main/categoryList">
                <el-icon>
                    <Grid />
                </el-icon>
                商品分类管理
            </el-menu-item>
            <el-menu-item index="/main/productList">
                <el-icon>
                    <Goods />
                </el-icon>
                商品信息管理
            </el-menu-item>
            <el-menu-item index="/main/productEdit">
                <el-icon>
                    <Upload />
                </el-icon>
                商品上架
            </el-menu-item>
        </el-submenu>
    </el-menu>
</template>

<script setup>
import { useUserStore } from '@/store'
import {
    Document,  // 新闻相关
    Menu,      // 分类列表
    ShoppingCart,  // 商品管理
    Grid,      // 商品分类
    Goods,     // 商品信息
    Upload     // 商品上架
} from '@element-plus/icons-vue'
// import { ElSubmenu, ElMenu, ElMenuItem } from 'element-plus'

const userStore = useUserStore()
</script>

<style>
.el-submenu__title {
    text-align: left;
}

.aside-title {
    color: #fff;
    font-size: 25px;
    width: 220px;
    text-align: center;
}

.aside-user {
    color: #fff;
    padding: 15px 0;
}

.aside-user h3 {
    margin: 5px;
}

.el-icon {
    margin-right: 8px;
}
</style>